<template>
    <div id="docking">
      <div class="tabQh">
        <div class="tab-item" @click="routerLink(index, item.path)" v-for="(item, index) in nav"  :key="index" :class="navIndex === index ? 'selfont' : 'norfont'">
          <div class="tab-items">{{item.title}}</div>
        </div>
      </div>
    <el-row>
      <el-col :span="24"  class="tltleText">
      </el-col>
      <el-col :span="24"  class="chartCenter" style="margin-top: 0.6vh">
        <el-row>
          <!--左侧部分 -->
          <el-col :span="5" id = "left">
            <el-row>
              <el-col :span="24">
                <div class = "chart_left chart_main" style="height: 30vh;position: relative;">
                  <el-row>
                    <el-col :span="1" style="width: 1.2vw">
                      <div class = "block"></div>
                    </el-col>
                    <el-col :span="22">
                      <div class = "title">公交车运力态势</div>
                    </el-col>
                  </el-row>
                  <div style="position: absolute;top: 4vh;left: 1.5vh;font-size: 0.5vw;color:#AFB8D2;">备用总数<span style="color:#064988;">35</span>辆</div>
                  <div id = "chart3" class = "chart"></div>
                </div>
              </el-col>
              <el-col :span="24">
                <div class = "chart_left chart_main" style="height: 29vh">
                  <el-row>
                    <el-col :span="1" style="width: 1.2vw">
                      <div class = "block"></div>
                    </el-col>
                    <el-col :span="22">
                      <div class = "title">公交线路平均运行周期</div>
                    </el-col>
                  </el-row>
                  <div id = "chart2" class = "chart"></div>
                </div>
              </el-col>
              <el-col :span="24">
                <div class = "chart_left chart_main" style="height: 29vh">
                  <el-row>
                    <el-col :span="1" style="width: 1.2vw">
                      <div class = "block"></div>
                    </el-col>
                    <el-col :span="22">
                      <div class = "title">公交线路平均车速</div>
                    </el-col>
                  </el-row>
                  <div id = "chart1" class = "chart"></div>
                </div>
              </el-col>
            </el-row>
          </el-col>
          <!--中间部分 -->
          <el-col :span="13" id = "center">
            <el-row>
              <el-col :span="24">
                <div class = "chart_center chart_main" style="height: 91vh;">
                  <div class = "line_index2">
                    <div v-for="(item, index) in nav2" :key="index">
                      <div  :class = "item.cla"></div>
                      <div class = "bus_use">{{item.name}}</div>
                    </div>
                  </div>
                  <div id="allmap" ref="allmap"></div>
                </div>
              </el-col>
            </el-row>
          </el-col>
          <!--右侧部分 -->
          <el-col :span="6" id = "right">
            <el-row>
              <el-col :span="24">
                <div class = "chart_right chart_main" style="height: 55vh">
                  <el-row>
                    <el-col :span="1" style="width: 1.2vw">
                      <div class = "block"></div>
                    </el-col>
                    <el-col :span="22">
                      <div class = "title">公交车运行轨迹</div>
                    </el-col>
                  </el-row>
                  <el-row :span="24">
                    <div class="tltleBox" style="z-index: 9999"><span>公交编号</span><span>所属路线</span><span>下一站</span><span>当前车速</span></div>
                    <div  style="height: 51vh;overflow: hidden; position:relative">
                      <div style="height:4vh;">
                        <vueSeamlessScroll :data="tableData" :class-option="defaultOption" autoshow="true">
                          <div class="textBox" v-for="(item,index) in tableData" :class="{'active':index%2 != 1}" :key="index" ><span>{{item.num}}</span><span>{{item.line}}</span><span>{{item.next}}</span><span>{{item.speed}}</span></div>
                        </vueSeamlessScroll>
                      </div>
                    </div>
                  </el-row>
                </div>
              </el-col>
              <el-col :span="24">
                <div class = "chart_right chart_main" style="height: 35vh">
                  <el-row>
                    <el-col :span="1" style="width: 1.2vw">
                      <div class = "block"></div>
                    </el-col>
                    <el-col :span="22">
                      <div class = "title">公交线路运力变动</div>
                    </el-col>
                  </el-row>
                  <div id = "chart6" class = "chart">

                  </div>
                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import axios from 'axios';
  import vueSeamlessScroll from 'vue-seamless-scroll'
  import { TMap } from '../TMap';
  import 'font-awesome/css/font-awesome.min.css';
  import {parks,venue} from '../../static/js/map/parking.js';
  import {busLine} from '../../static/js/map/busLine.js';
  import {latLngInit} from '../../static/js/map/gpsToTX.js';
  import right from '../../static/img/right.png';
  import gj from '../../static/img/bus_gj.png';
  import {config,xAxiss,yAxiss,grid,tooltip,legend,dotHtml} from '../../static/js/config/chartConfig.js';
  import jq from 'jquery';
  var echarts = require('echarts');
  var chart1 = [{"tm":"一小时以内","nu":200,"pro":5.25},{"tm":"1-2","nu":260,"pro":6.82},{"tm":"2-3","nu":400,"pro":10.50},{"tm":"3-4","nu":600,"pro":15.75},
    {"tm":"4-5","nu":1200,"pro":31.50},{"tm":"5-6","nu":600,"pro":15.75},{"tm":"6-7","nu":300,"pro":7.87},{"tm":"7-8","nu":200,"pro":5.25},{"tm":"8+","nu":50,"pro":1.31}];
  var tab = [{"time":'7:00-8:00',"num":500},{"time":'8:00-9:00',"num":488},{"time":'9:00-10:00',"num":455},{"time":'10:00-11:00',"num":432}
    ,{"time":'11:00-12:00',"num":399},{"time":'12:00-13:00',"num":367},{"time":'13:00-14:00',"num":366},{"time":'14:00-15:00',"num":355},{"time":'15:00-16:00',"num":300}
    ,{"time":'16:00-17:00',"num":456},{"time":'17:00-18:00',"num":500},{"time":'18:00-19:00',"num":555}];
  var chart2 = [{
    num: '车1',
    line: '635普',
    next: '两路城南',
    speed:20
  }, {
    num: '车2',
    line: '635普',
    next: '两路城南',
    speed:24
  }, {
    num: '车3',
    line: '685中',
    next: '万寿福居',
    speed:33
  }, {
    num: '车4',
    line: '685中',
    next: '万寿福居',
    speed:45
  }, {
    num: '车5',
    line: '685中',
    next: '万寿福居',
    speed:67
  }, {
    num: '车6',
    line: '685中',
    next: '万寿福居',
    speed:20
  }, {
    num: '车7',
    line: '685中',
    next: '仙桃数据谷',
    speed:26
  }, {
    num: '车8',
    line: '635中',
    next: '仙桃数据谷',
    speed:55
  }, {
    num: '车9',
    line: '635中',
    next: '仙桃数据谷',
    speed:39
  }, {
    num: '车14',
    line: '635中',
    next: '同兴工业园',
    speed:43
  }, {
    num: '车15',
    line: '635中',
    next: '同兴工业园',
    speed:21
  }, {
    num: '车16',
    line: '572区间',
    next: '国博站',
    speed:33
  }, {
    num: '车17',
    line: '572区间',
    next: '国博站',
    speed:41
  }, {
    num: '车18',
    line: '会展应急一线',
    next: '国博站',
    speed:20
  }]
  export default {
    name:"docking",
    components: {

    },
    data(){
      return{
        nav: [
          {title: '公交车监测', path: '/docking'},
          {title: '接驳车监测', path: '/dockings'},
        ],
        nav2: [{name: '685中',color:'#ff2800',cla:'bus_color0 bus_color'},
          {name: '572区间',color:'#30ff00',cla:'bus_color1 bus_color'},
          // {name: '572中',color:'#dd00ff',cla:'bus_color2 bus_color'},
          {name: '635普',color:'#FFE00B',cla:'bus_color2 bus_color'},
          {name: '635中',color:'#292AFF',cla:'bus_color3 bus_color'},
          {name: '965线',color:'#00F7FF',cla:'bus_color4 bus_color'},
          {name: '677普',color:'#ff00bf',cla:'bus_color5 bus_color'}
          ],
        navIndex: 0,
        tableData:chart2,
        pa_tab:tab,
        t_w1:'20px',
        t_w2:'200px',
        line:[],
        busline:[],
        animate:false,
        chartData1:[]
      }
    },
    watch: {
        "$route"() {
            let path = this.$route.path;
            // 检索当前路径
            this.checkRouterLocal(path);
        }
    },
    components: {
      vueSeamlessScroll
    },
    computed:{
      defaultOption () {
        return {
          step: 0.5, // 数值越大速度滚动越快
          limitMoveNum: 11, // 开始无缝滚动的数据量 this.dataList.length
          hoverStop: true, // 是否开启鼠标悬停stop
          direction: 1, // 0向下 1向上 2向左 3向右
          openWatch: true, // 开启数据实时监控刷新dom
          singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
          singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
          waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
        }
      }
    },
    mounted () {
      this.t_w1 =config().fontSize*7+'px';
      this.t_w2 =config().fontSize*8+'px';
      this.chart1()
      this.chart2()
      this.chart3()
      // this.chart5()
      this.chart6()
      this.map()
      this.navIndex = this.currentPage()
    },
    methods: {
      routerLink(index, path) {
        this.navIndex = index;
        this.$router.push(path)
      },
      checkRouterLocal(path) {
        // 查找当前路由下标高亮
        this.navIndex = this.nav.findIndex(item => item.path === path);
      },
      currentPage(){
        for (let i = 0; i < this.nav.length; i++) {
          if(this.nav[i].path == this.$route.path){
            return i;
          }
        }
      },
      changeLine(a){
        this.line_ind = a
        this.map(a);
      },
      busLineColor(data,color){
        var d = [];
        var a = 0;
        for(var i = 0;i < data.length; i++) {
          var tmp = {};
          if(data[i].TRACK != null){
            tmp.name = data[i].NAME;
            tmp.color = color[i];
            tmp.cla = 'bus_color bus_color'+a;
            d.push(tmp)
            a++
          }
        }
        this.nav2 = d;
        for(var m = 0;m < this.nav2.length; m++) {
          var cls = '.bus_color' +m
          jq(cls).css('background', this.nav2[m].color)
        }
      },
      //地图添加折线
      addLine(map){
        var color = ['#ffa300','#ffef00','#56ff00','#00e5ff','#001eff','#af00ff','#ff007f','#ff3000','#82f2ce'];
        // this.$http({
        //   url: this.$http.adornUrl("/bigscreen/busroute/busLine"),
        //   method: 'get',
        //   // params: this.$http.adornParams({
        //   //   'page':1,
        //   //   'limit': 2,
        //   //   'jobid': 3,
        //   //   'chk_projid': 4
        //   // })
        // }).then(({data}) => {
        //   var lines = data.list;
        //   this.busLineColor(lines,color);
        //   for(var i = 0;i < lines.length; i++) {
        //     (function(v){
        //       if(lines[v].TRACK != null){
        //         var pl = latLngInit(lines[v].TRACK)
        //         var polyline = new qq.maps.Polyline({
        //           path: pl,
        //           strokeColor: color[v],
        //           strokeWeight: 2,
        //           //strokeDashStyle:"dash",
        //           zIndex: 1000,
        //           editable:false,
        //           map: map
        //         });
        //       }
        //     })(i);
        //   }
        // })

        var lines = busLine();
        this.busLineColor(lines,color);
        for(var i = 0;i < lines.length; i++) {
          (function(v){
            if(lines[v].TRACK != null){
              var pl = latLngInit(lines[v].TRACK)
              var polyline = new qq.maps.Polyline({
                path: pl,
                strokeColor: color[v],
                strokeWeight: 2,
                //strokeDashStyle:"dash",
                zIndex: 1000,
                editable:false,
                map: map
              });
            }
          })(i);
        }
      },
      //在地图添加多边形覆盖物
      addOutline(map,data){
        //国博馆轮廓
        for (var n = 0; n < data.length; n++) {
          var ph = []
          for (var k = 0; k < data[n].path.length; k++) {
            ph.push(new qq.maps.LatLng(data[n].path[k][0], data[n].path[k][1]))
          }
          var bw = 0
          if(data[n].name == '重庆国际<br/>博览中心'){
            bw = 1
          }
          var polygon2 = new qq.maps.Polygon({
            map: map,
            path: ph,
            strokeWeight: bw,
            strokeDashStyle: 'dash',
            strokeColor: '#a2ecfb',
            fillColor: qq.maps.Color.fromHex(data[n].color, data[n].transparent)
          });
          if(data[n].showName) {
            var ce = new qq.maps.LatLng(data[n].center[0], data[n].center[1]);
            var la = new qq.maps.Label({
              position: ce,
              map: map,
              content: '<div class = "tit" style="display: none;height: 12px;width:12px;margin-top: -67%;margin-left: -63%;">' + data[n].name + '</div>'
            });
          }
        }
        var dd = [
          {"type":1,"point":[29.712633,106.541424],"info":'572区间',color:'#af00ff'},
          {"type":1,"point":[29.710047,106.523695],"info":'572区间',color:'#af00ff'},
          {"type":1,"point":[29.718806,106.513352],"info":'572区间',color:'#af00ff'},
          {"type":1,"point":[29.724769,106.556697],"info":'685中',color:'#ffef00'},
          {"type":1,"point":[29.723576,106.559765],"info":'685中',color:'#ffef00'},
          {"type":1,"point":[29.723763,106.578884],"info":'685中',color:'#ffef00'},
        ];
        for(var y = 0;y < dd.length; y++) {
          (function(q){
            var ce = new qq.maps.LatLng(dd[q].point[0],dd[q].point[1]);
            var la = new qq.maps.Label({
              position: ce,
              map: map,
              content: '<div style="height: 4vh;width:4vh;margin-top: -60%;margin-left: -55%;border-radius: 50%;background-color: '+dd[q].color+' !important;background-image: url('+gj+');background-repeat: no-repeat;background-size: 100%;"></div>'
            });
            var inf = new qq.maps.InfoWindow({
              map: map
            });
            var car_name = '公交车';
            qq.maps.event.addListener(la, 'click', function() {
              inf.open();
              inf.setContent('<div style="text-align:center;white-space:'+
                'nowrap;margin:10px;color: #000fff;">'+car_name+dd[q].info+'</div>');
              inf.setPosition(ce);
            });
          })(y);
        }
      },
      map(){
        var p = parks();
        TMap().then(qq => {
          var map = new qq.maps.Map(document.getElementById("allmap"), {
            // 地图的中心地理坐标。
            center: new qq.maps.LatLng(29.717129,106.544380),
            zoom: 12,
            mapStyleId: 'style1',
            //disableDefaultUI: true,    //禁止所有控件
          });
          var circle1=new qq.maps.Circle({
            map:map,
            center:new qq.maps.LatLng(29.717129,106.544380),
            radius:2500,
            fillColor:qq.maps.Color.fromHex('#f8ecd0', 0.000001),
            strokeWeight:1
          });

          var circle2=new qq.maps.Circle({
            map:map,
            center:new qq.maps.LatLng(29.717129,106.544380),
            radius:5000,
            fillColor:qq.maps.Color.fromHex('#f8ecd0', 0.000001),
            strokeWeight:1
          });
          var circle3=new qq.maps.Circle({
            map:map,
            center:new qq.maps.LatLng(29.717129,106.544380),
            radius:10000,
            fillColor:qq.maps.Color.fromHex('#f8ecd0', 0.000001),
            strokeWeight:1
          });

          this.line = this.addLine(map)
          this.addOutline(map,venue());
          this.addOutline(map,parks());
          //当缩放级别小于15 隐藏文字
          qq.maps.event.addListener(map,'zoom_changed',function() {
            var zoomLevel = map.getZoom();
            var si = {"f15":1.5,"f16":1.8,"f17":2.3,"f18":3.8}
            if(zoomLevel>14){
              jq('.tit').css('display','block')
            }else{
              jq('.tit').css('display','none')
            }
          });
        });

        jq(function(){
          jq("#allmap").bind("DOMNodeInserted",function(e){
            var tempCount = 0;
            jq("#allmap .smnoprint").siblings().each(function(){
              tempCount++;
              if(tempCount==2||tempCount==3){
                jq(this).remove();
              }
            });
          });
        });

      },
      chart1Data(){
        this.$http({
          url: this.$http.adornUrl("/bigscreen/t81routetraffablty/busDistribution"),
          method: 'get',
          
        }).then(({data}) => {
         var  dat = data.list;
          this.chart1(dat)
        })
      },
      chart2(){
        var xData = ["路线1","路线2","路线3","路线4","路线5","路线6","路线7","路线8","路线9","路线10"]
        var data1 = [45,58,66,39,72,36,56,48,45,33]
        var data2 = [32,35,52,43,60,28,48,40,36,29]
        var data3 = [6,37,15,42,15,19,30,11,40,49]
        var chartsBar_left = echarts.init(document.getElementById('chart2'));
        var option = {
          tooltip:  tooltip(),
          grid:  grid(20),
          tooltip:  tooltip(),
          color:['#66c2ff',],
          xAxis: xAxiss({'data':xData,'name':'','lineShow':true,'labelShow':true,'position':'','unit':'',"splitLineShow":false,"splitLineType":'dashed',"splitLineColor":''}),
          yAxis:yAxiss({'data':'','name':'分钟','lineShow':false,'labelShow':true,'position':'','unit':'',"splitLineShow":false,"splitLineType":'dashed',"splitLineColor":''}),
          series: [ {
                type: 'bar',
                name: '平均运行周期',
                position: 'right',
                barWidth:'45%',
                itemStyle: {
                  normal: {
                    barBorderRadius:50,
                  }
                },
                offset: 80,
                data: data1
              },]
        };
        chartsBar_left.setOption(option)
        window.onresize = chartsBar_left.resize;
      },
      chart1(){
        var xData = ["8:00","8:10","8:20","8:30","8:40","8:50","9:00","9:10","9:20","9:30"]
        var data1 = [45,58,66,39,72,36,56,48,45,33]
        var data2 = [32,35,52,43,60,28,48,40,36,29]
        var data3 = [6,37,15,42,15,19,30,11,40,49]
        var data4 = [5,34,12,23,45,43,67,12,21,45]
        var data5 = [45,56,13,43,67,75,12,57,34,22]
        var barWidth = jq("#chart6").width()/xData.length*0.25
        var chartsBar_left = echarts.init(document.getElementById('chart1'));
        var option = {
          tooltip:  tooltip(),
          legend: legend(['线路1','线路2','线路3','线路4','线路5','线路6'],1),
          grid:  grid(28),
          tooltip:  tooltip(),
          xAxis: xAxiss({'data':xData,'name':'','lineShow':true,'labelShow':true,'position':'','unit':'',"splitLineShow":false,"splitLineType":'dashed',"splitLineColor":''}),
          yAxis:yAxiss({'data':'','name':'km/h','lineShow':true,'labelShow':true,'position':'','unit':'',"splitLineShow":false,"splitLineType":'dashed',"splitLineColor":''}),
          color:['#0399fd','#52fcfc','#6358fc','#1cff9e','#fbce00','#ff2661'],
          series: [ {
            type: 'line',
            name: '线路1',
            lineStyle: {
                width: config().lineWidth
            },
            itemStyle: {
              normal: {
                barBorderRadius:50,
              }
            },
            offset: 80,
            data: data1
          },{
            type: 'line',
            name: '线路2',
            lineStyle: {
                width: config().lineWidth
            },
            itemStyle: {
              normal: {
                barBorderRadius:50,
              }
            },
            offset: 80,
            data: data2
          },{
            type: 'line',
            name: '线路3',
            lineStyle: {
                width: config().lineWidth
            },
            itemStyle: {
              normal: {
                barBorderRadius:50,
              }
            },
            offset: 80,
            data: data3
          },{
            type: 'line',
            name: '线路4',
            lineStyle: {
                width: config().lineWidth
            },
            itemStyle: {
              normal: {
                barBorderRadius:50,
              }
            },
            offset: 80,
            data: data4
          },{
            type: 'line',
            name: '线路5',
            lineStyle: {
                width: config().lineWidth
            },
            itemStyle: {
              normal: {
                barBorderRadius:50,
              }
            },
            offset: 80,
            data: data5
          },{
            type: 'line',
            name: '线路6',
            lineStyle: {
                width: config().lineWidth
            },
            itemStyle: {
              normal: {
                barBorderRadius:50,
              }
            },
            offset: 80,
            data: data5
          },]
        };
        chartsBar_left.setOption(option)
        window.onresize = chartsBar_left.resize;
      },
      chart3(){
        var data1 = [3,2,1,0,1,2,3,4,2,2];
        var data2 = [2,4,3,2,3,1,2,3,1,2];
        var data3 = [1,2,4,3,0,2,1,2,1,0];
        var xData  = ["路线1","路线2","路线3","路线4","路线5","路线6","路线7","路线8","路线9","路线10"];
        var legends = ['在途数量','不在途数量']
        var chartsBar_left = echarts.init(document.getElementById('chart3'));
        var option = {
          tooltip:  tooltip(),
          legend: legend(legends,1),
          color: ["rgba(5,93,156,0.6)"],
          grid: grid(30),
          xAxis: xAxiss({'data':xData,'name':'','lineShow':true,'labelShow':true,'position':'','unit':'',"splitLineShow":false,"splitLineType":'dashed',"splitLineColor":''}),
          color:['#2256d9','#0399fd'],
          yAxis:yAxiss({'data':'','name':'辆','lineShow':false,'labelShow':true,'position':'','unit':'',"splitLineShow":false,"splitLineType":'dashed',"splitLineColor":''}),
          series: [{
            name: "在途数量",
            type: "bar",
            stack: "1",
            barWidth:'60%',
            data: data1
          },{
            name: "不在途数量",
            type: "bar",
            stack: "1",
            barWidth:'60%',
            data: data2
          }]
        };
        chartsBar_left.setOption(option)
        window.onresize = chartsBar_left.resize;
      },
      chart6(){
        var xData = ["路线1","路线2","路线3","路线4","路线5","路线6","路线7","路线8","路线9"];
        var data1 =[6,11,9,7,7,5,9,9,8,5]
        var data2 =[2,1,-1,1,-2,-1,3,1,-2,2]
        var data3 = [];
        var data4 = [];
        var data5  = []
        var barWidth = jq("#chart6").width()/xData.length*0.25
        var chartsBar_left = echarts.init(document.getElementById('chart6'));
        var option = {
          legend: legend(['计划运力','调整运力'],1),
          grid:  grid(20),
          tooltip:  tooltip(),
          color:['#0399fd','#ff2661'],
          xAxis: xAxiss({'data':xData,'name':'','lineShow':true,'labelShow':true,'position':'','unit':'',"splitLineShow":false,"splitLineType":'dashed',"splitLineColor":''}),
          yAxis:yAxiss({'data':'','name':'','lineShow':false,'labelShow':true,'position':'','unit':'',"splitLineShow":false,"splitLineType":'dashed',"splitLineColor":''}),
          series: [ {
            type: 'bar',
            name: '计划运力',
            position: 'right',
            offset: 80,
            data: data1
          },{
            type: 'bar',
            name: '调整运力',
            position: 'right',
            offset: 80,
            data: data2
          }]
        };
        chartsBar_left.setOption(option)
        window.onresize = chartsBar_left.resize;
      },
    }
  }
</script>
<style lang="scss" scoped>
  #docking{
    width: 100%;
    height: 100vh;
    background: #081220;
    *{margin: 0;padding: 0;}

    #allmap{
      height: 91vh;
      overflow: hidden;
    }

    .line_index2{
      position: absolute;
      left: 1vw;
      top: 4vh;
      width: 11.3vw;
      background-color: rgba(89,93,100,0.5);
      z-index: 10000;
    }

    .bus_color{
      height: 0.5vh;
      width: 2.5vw;
      float: left;
      margin-top: 2.25vh;
      margin-left: 1vw;
    }
    .bus_use{
      color: #fff;
      font-size: 0.7vw;
      width: 63%;
      line-height: 5vh;
      margin-left: 4vw;
    }

    .legendBox{
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.7vw;
      color: #AFB8D2;
      margin-top: 1vh;
      width: 33%;
      p:nth-child(1){
        width: 0.6vw;
        height: 0.6vw;
      }
    }

    .tltleText{
      height: 7vh;
    }

    .chart{
      height: 85%;
    }
    .charts{
      height: 92%;
    }
    .next_chart{
      width: 50vh;
      height: 34vh;
    }

    .chart_left{
      height: 28vh;
    }
    .park_top3{
      background-repeat: no-repeat;
      background-size: 2.5vh;
      background-position-x: 50%;
      background-position-y: 40%;
    }
    .park_top31{
      background-image: url('../../static/img/park_top1.png');
    }
    .park_top32{
      background-image: url('../../static/img/park_top2.png');
    }
    .park_top33{
      background-image: url('../../static/img/park_top3.png');
    }

    .tabQh{
      position: absolute;
      right: 0;
      .tab-item{
        color: #fff;
        position: relative;
        z-index: 9999;
        float: left;
        width: 16vh;
        height: 4vh;
        background: url("../../static/img/hoverbefore.png") no-repeat;
        background-size: 100% 100%;
        text-align: center;
        line-height: 4vh;
        color: #fff;
        margin: 1.6vh 1vh 0 0;
        cursor: pointer;
      }
      .tab-items{
        font-size: 2vh;
      }
      .selfont{
        width: 16vh;
        height: 4vh;
        background: url("../../static/img/hoverafter.png") no-repeat;
        background-size: 100% 100%;
        text-align: center;
        line-height: 4vh;
      }
    }
    .tltleBox{
       background: #023954;
       position:absolute;
       top: 0;
     }
    .tltleBox,.textBox{
      width: 100%;
      display: flex;
      align-items: center;
      height:4vh;
      line-height: 4vh;
      font-size: 0.7vw;
      color: #0475C3;
      transition: all 0.5s;
      overflow: hidden;
      span{
        width: 33%;
        text-align: center;
      }
    }
    .textBox{
      color: #AFB8D2;
      overflow: hidden;
    }
    .tltleBox:hover,.textBox:hover{
      background: #a8f7ff;
    }
    .active {
      background-color: #01354E;
    }
    .anim{
      transition: all 0.5s;
    }
  }
</style>
